<template>
  <div class="fllow-list">
    <m-header title="跟单列表"></m-header>
    <div class="list-infos">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
            <tr>
              <th>跟单用户</th>
              <th>倍数</th>
              <th>金额</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody class="list-item" v-if="followList.length"
            :class="{'loaded-data': followList.length < 3, 'loadmore-data': followList.length < 5}">
            <tr v-for="item in followList" :key="item.id">
              <td>{{item.nickname}}</td>
              <td>{{item.bet_rate}}</td>
              <td class="money">{{item.total_price}}</td>
              <td>{{item.create_time}}</td>
            </tr>
          </tbody>
        </x-table>
      </scroller>
      <div class="no-data" v-if="!loading && !followList.length">
        <img src="../../../assets/imgs/icon-noattention@2x.png" alt="">
        <div class="desc">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  data () {
    return {
      pageNum: 1,
      isPull: false, // 下拉
      loading: true,
      billId: '',
      followList: [
        // {
        //   bet_rate: '1',
        //   bill_id: '1',
        //   create_time: '2019/02/16',
        //   nickname: '嘻嘻啊1',
        //   total_price: '2'
        // },
        // {
        //   bet_rate: '2',
        //   bill_id: '2',
        //   create_time: '2019/02/26',
        //   nickname: '嘻嘻啊2',
        //   total_price: '20'
        // }
      ]
    }
  },
  mounted () {
    const query = this.$route.params;
    if (query.id) {
      this.billId = query.id;
      // this.getDatas(1);
    }
  },
  methods: {
    ...mapActions({
      getFollowBetList: 'follow/getFollowBetList'
    }),
    refresh (done) { // 下拉
      this.isPull = true;
      this.pageNum = 1;
      this.loading = true;
      this.getDatas(done);
    },
    infinite (done) { // 上滑
      if (!this.isPull) {
        this.loading = true;
        this.getDatas(done);
      }
    },
    getDatas (done) {
      if (this.loading) {
        const params = {
          bill_id: this.billId,
          page: this.pageNum,
          size: 10
        }
        this.getFollowBetList(params).then(res => {
          this.loading = false;
          let listData = res.list || [];
          if (listData.length) {
            if (this.isPull) {
              this.isPull = false;
              this.followList = [];
            }
            this.pageNum += 1;
            const listDatas = this.followList;
            this.followList = listDatas.concat(listData);
            if (this.pageNum < res.page.total) {
              done(true);
            } else {
              done(2); ;
            }
          } else {
            done(2);
          }
          // if (res) {
          //   const followLists = this.followList;
          //   const followData = res.list || [];
          //   this.followList = followLists.concat(followData);
          // }
        });
      }
    },
    getBetList (page) {
      // this.getFollowBetList({ page, bill_id: this.billId }).then(res => {
      //   if (res) {
      //     const followLists = this.followList;
      //     const followData = res.list || [];
      //     this.followList = followLists.concat(followData);
      //   }
      // });
    }
  }
}
</script>
<style lang="less" scoped>
  .fllow-list {
    .list-infos {
      position: absolute;
      top: 0.92rem;
      bottom: 0;
      width: 100%;
      overflow-y: auto;
      th {
        font-weight: initial;
      }
      .vux-table:after {
        display: none;
      }
      .list-item {
        tr:last-child {
          td::before {
            display: none;
          }
        }
        td {
          font-size: 0.24rem;
          color: #666666;

          &.money {
            color: #D44743;
          }
          &:first-child {
            width: 2rem;
          }
          &:last-child {
            width: 1.8rem;
          }
        }
      }
    }

    .no-data {
      position: fixed;
      width: 100%;
      top: 1.72rem;
      bottom: 0;
      height: 100%;
      text-align: center;
      background: #ffffff;
      img {
        display: block;
        width: 4.15rem;
        height: 3.22rem;
        margin: 0 auto;
        padding-top: 0.8rem;
      }
      .desc {
        margin-top: 0.3rem;
        font-size: 0.22rem;
        color: #919191;
      }
    }
  }
</style>
